<template>
	<div class="reflect"
      v-loading="loading.status"
      :element-loading-text="loading.txt"
  >
		<div class="reflect-tip">
			<span v-text="getCount(listData)"></span><span> 条数据待录入</span>
			<span class="fr">只有结束的直播才能录入教学反思</span>
		</div>
		<div class="reflect-cont">
			<ul>
				<li class="reflect-list clear" v-for="(item, index) in listData" :key="index">
					<div class="reflect-list-l fl">
            <h3>{{item.name}}</h3>
						<div>
							<span>{{item.recorder_name}}</span>
							<span>{{item.start_time|datefmt('MM-DD')}} {{item.start_time|datefmt('HH:mm')}} - {{item.end_time|datefmt('HH:mm')}}</span>
						</div>
					</div>
					<div class="reflect-list-r fr" v-if="item.is_feedback=='0'">
						<router-link class="entry-reflect" :to="{path: '/course2/reflect-add', query: {id: item.id,name:item.name}}">录入</router-link>
					</div>
					<div class="reflect-list-r fr" v-else-if="item.is_feedback=='1'">
						<i>已录入</i>
						<router-link :to="{path: '/course2/reflect-edit', query: {id:item.feedback_id,name:item.name}}">查看</router-link>
					</div>
				</li>
			</ul>
			<el-pagination v-if="data_sum>10" background class="pageing" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page_index" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper" :total="data_sum">
			</el-pagination>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipng image_state01"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      loading:{
          status:false,
          txt:'获取数据...',
      },
      placeholder: false,
      page_index: 1,
      page_size: 10,
      data_sum: 0,
      listData: [],
    };
  },
  created() {
    this.getList();
  },
  filters: {
    datefmt: function(input, fmtstring) {
      var mydate = new Date(input);
      var y = mydate.getFullYear();
      var m = mydate.getMonth() + 1;
      var d = mydate.getDate();
      var h = mydate.getHours() < 10 ? '0'+ mydate.getHours()  : mydate.getHours() ;
      var mi = mydate.getMinutes() < 10 ? '0'+ mydate.getMinutes()  : mydate.getMinutes() ;;
      var s = mydate.getSeconds();
      var date1 = new Date();
      var y1 = date1.getFullYear();
      var m1 = date1.getMonth() + 1;
      var d1 = date1.getDate();
      if (fmtstring == "charToday") {
        if (y === y1 && m === m1 && d === d1) {
          return "今天";
        } else {
          return m + "月" + d + "日";
        }
      }
      if (fmtstring == "MM-DD") {
        return m + "月" + d + "日";
      }
      if (fmtstring == "HH:mm") {
        return h + ":" + mi;
      }
    }
  },
  methods: {
    getList() {
      this.loading.status = true;
      let success = data => {
        this.loading.status = false;
        this.listData = data.data.data;
        this.page_index = data.data.page_index;
        this.page_size = data.data.page_size;
        this.data_sum = data.data.data_sum;
        this.listData.length === 0
          ? (this.placeholder = true)
          : (this.placeholder = false);
      };
      let fail = data => {
           this.loading.status = false;
           this.$message.error( data.msg )
      }
      this.$ajax.get("api/teachingschedule/feedback_schedule_list", {
        params:{page_index: this.page_index, page_size: this.page_size},
        func: { success: success,fail:fail }
      });
    },
    getCount(arr) {
      var sum = 0;
      arr.find((value, index, arr) => {
        var flag = value.is_feedback == 0;
        if (flag) {
          sum++;
        }
      });
      return sum;
    },
    handleSizeChange(val) {
      this.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page_index = val;
      this.getList();
    }
  }
};
</script>
<style lang="scss">
.reflect{
  h3{
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
